<html>
<head>
    <meta charset="utf-8">
    <title>Weather Forecast</title>
    <style type="text/css">
        body{
            color:white;
        }

        #container {
            background-image: url(https://s.yimg.com/os/mit/media/m/weather/images/fallbacks/lead/clear_d-e618500.jpg);
            text-shadow: 2px 2px 1px #000000;

            padding: 5px;
            font-family: Arial;
        }

        #general {
            padding: 10px;
        }

        #currentWeather {
            font-size: 40px;
        }

        #generalLow {
            margin: 0px 0px 0px 0px;
        }

        #location {
            font-size: 40px;
        }

        #region {
            height: 100px;
        }

        #weather {
            margin: auto auto 15px auto;
            font-size: 30px;
        }

        #temperature {
            font-size: 80px;
        }

        .subContainer {

            background-color: rgba(0, 0, 0, 0.6);
            padding: 10px;
            margin: 10px;

        }

        .subContainer th {
            font-size: 24px;
            text-align: left;
            margin-bottom: 10px;

        }

        .forecastTable {
            width: 100%;
        }

        .forecastTable td {
            border: 0px solid #ffffff;
            border-bottom-width: 1px;
            height: 30px;
        }

        .blueText {
            color:lightskyblue;
            margin: 0 30px 0 10px;
        }

        .forecastDay{
            width:100px;
            display:inline-block;
        }

        .forecastWeather {
            display:inline-block;
            margin: 0px auto;
            text-align: center;
            width:300px;
        }

        .forecastHigh {
            display:inline-block;
            float: right;
            padding-right: 10px;
        }

        .forecastLow {
            display:inline-block;
            float: right;
        }


    </style>
</head>
<body>
<div id="container">
    <div id="general">
        <div id="location">Beijing</div>
        <div id="region">Beijing, China</div>
        <div id="currentWeather">Sunny</div>
        <div><span>Highest<span class="blueText">48°</span></span><span id="high">Lowest<span
                class="blueText">30°</span></span></div>
        <div id="temperature">36°</div>
    </div>
    <div class="subContainer">
        <table class="forecastTable">
            <tr>
                <th>Forecast</th>
            </tr>
            <tr>
                <td><span class="forecastDay">Today</span>
                    <span class="forecastWeather">Mostly Clear</span>
                    <span class="forecastLow"><span class="blueText">36°</span></span>
                    <span class="forecastHigh">
48°</span>
                </td>

            </tr>
            <tr>
                <td>Tomorrow</td>

            </tr>
            <tr>
                <td>Sunday</td>

            </tr>
            <tr>
                <td>Monday</td>

            </tr>
            <tr>
                <td>Tuesday</td>

            </tr>
        </table>
    </div>
    <div class="subContainer">
        <table>
            <tr>
                <th>Details</th>
            </tr>
            <tr>
                <td>Feels like<span class="blueText">30</span>Visibility<span class="blueText">4.97ml</span>Humidity
                    <span class="blueText">56%</span>UV
                    Index<span class="blueText">2(low)</span>
                </td>

            </tr>

        </table>
    </div>
</div>

</body>
</html>
